<template>
  <div class="swipper-box">
    <swiper v-if="swipperList.length>1" :options="swiperOption" ref="mySwiper">
      <!--slides-->
      <swiper-slide v-for="item in swipperList" :key="item.id">
        <img class="swipper-img" :src="item.imgUrl" alt="">
      </swiper-slide>
      <!--  <swiper-slide>I'mSlide4</swiper-slide>
        <swiper-slide>I'mSlide5</swiper-slide>
        <swiper-slide>I'mSlide6</swiper-slide>
        <swiper-slide>I'mSlide7</swiper-slide>-->
      <!--Optionalcontrols 按钮图标 一般默认有这四种-->
      <div class="swiper-pagination" slot="pagination"></div>
      <!--  <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-scrollbar" slot="scrollbar"></div>-->
    </swiper>
  </div>
</template>

<script>
    export default {
        name: "HomeSwipper",
      data(){
          return{
            //轮播图项目符号对象
            swiperOption:{
              pagination:{
                el:'.swiper-pagination'
              },
              loop:true
            },
            swipperList:[
              {
              id:1,
              imgUrl:'https://gtms04.alicdn.com/tps/i4/TB1pgxYJXXXXXcAXpXXrVZt0FXX-640-200.jpg'
            },{
              id:2,
              imgUrl: 'https://img.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg'
              },{
              id:3,
              imgUrl: '//img.alicdn.com/imgextra/i4/6000000006218/O1CN01HXZh5f1vntRYfEgdR_!!6000000006218-0-lubanimage.jpg'
              }]
          }
      }
    }
    /*为什么不用data：在这里data本质上是一个组件 所以要用组件的格式去打 组件的配置对象跟根实例的配置对象是不一样的
    * 这边是组件中的数据容器 要用（）来申明组件*/
</script>

<style scoped lang="stylus">
 .swipper-box{
   height: 0;
   padding-bottom: 40%;/*腾出来40%的位置 如果图片比较大 就把这里的数值给大一点*/
   /*自己做的时候直接把图片在画图工具里调成合适的大小就行*/
   overflow: hidden;/*溢出的隐藏*/
 }
  .swipper-img{
    width: 100%;
  }
  .swipper-box >>> .swiper-pagination-bullet
     background-color white
     opacity 1

  .swipper-box >>> .swiper-pagination-bullet-active
     background-color #df2127

 .swipper-box{
   height: 0;
   padding-bottom: 31%;
   overflow: hidden;
  }

</style>
